<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>danmu.js</title>
    <style>
      html {
       width: 100%;
       height: 100%;
      }
      body {
       width: 100%;
       height: 100%;
      }
    </style>
</head>
<body>
    <div id="wrap">
      <div id="mse"></div>
    </div>
    <div>
      <button onclick="start()">弹幕开始</button>
      <button onclick="pause()">弹幕暂停</button>
      <button onclick="play()">弹幕播放</button>
      <button onclick="setArea()">setArea</button>
      
    </div>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@1.3.5/browser/index.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    window.onresize = function () {
      document.getElementById('mse').style.width = `${window.innerWidth / 2}px`
    }
    var player = new Player({
      el: document.querySelector('#mse'),
      url: '//s1.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
      cssFullscreen: true,
      danmu: {
        mode: 'scroll',
        mouseControl: true,
        fontSize: 14,
        comments: [  //弹幕数组
          {
            duration: 5000,
            start: 0,
            id: 1 + '',
            txt: 2 + '', //弹幕文字内容
            style: {
                fontSize: '25px',
                lineHeight: 1.125
            },
          },
          {
            duration: 5000,
            start: 200,
            id: 2 + '',
            txt: 2 + '', //弹幕文字内容
            style: {
              fontSize: '25px',
              lineHeight: 1.125
            },
          },
          {
            duration: 5000,
            start: 400,
            id: 3 + '',
            txt: 3 + '', //弹幕文字内容
            style: {
                fontSize: '25px',
                lineHeight: 1.125
            },
          },
          {
            duration: 5000,
            start: 600,
            id: 4 + '',
            txt: 4 + '', //弹幕文字内容
            style: {
              fontSize: '25px',
              lineHeight: 1.125
            },
          }
        ],
        area: {  //弹幕显示区域
          start: 0, //区域顶部到播放器顶部所占播放器高度的比例
          end: 1 //区域底部到播放器顶部所占播放器高度的比例
        },
        
        closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
        defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕
      }
    });
    function start () {
      player.danmu.start()

      player.danmu.on('bullet_hover', function (data) {
        if (!data.bullet.el) {
          console.log(5342534523)
        }
      })
      let id = 1
      setInterval(function() {
        id++;
        player.danmu.sendComment({  //发送弹幕
          duration: 5000,
          id: id+'',
          originData: {
          x: '2121'
        },
          txt: id+'', //弹幕文字内容
          style: {
            fontSize: '25px',
            lineHeight: 1.125
          },
        })
      }, 50)
    }
    function play () {
      player.danmu.play()
    }

    function pause () {
      player.danmu.pause()
    }

    function stop () {
      player.width = 100
    }

    function setAllDuration () {
      player.danmu.setAllDuration('scroll', 10000)
    }

    function setArea() {
      player.danmu.setArea({
        start: 0,
        end: 0.4
      })
    }

    // setTimeout(function () {
    //   player.danmu.on('bullet_start', function () {
    //     console.log(1)
    //   })
    // }, 3000)
    </script>
</body>
</html>
